<template>
  <Row v-loading="spinShow" class="layout-content-body">
    <dtable :columns="columns"
            :dataAll="dataAll"
            :dataShow="dataShow"
            add
            @refresh="getall()"
            @show="show"
            @add="add"
            @del="del"
            @edit="edit" v-loading="spinShow"></dtable>
    <Modal
      title="资源信息"
      v-model="editData"
      :loading="loading"
      :mask-closable="false" class="editm"
      @on-ok="asyncOK"
      @on-cancel="asyncCancel">
      <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
        <Form-item label="名称" prop="Name">
          <Input v-model="formItem.Name" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="路径" prop="Url">
          <Input v-model="formItem.Url" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="图标" prop="Logo">
          <Input v-model="formItem.Logo" placeholder="请输入" :icon="formItem.Logo"></Input>
        </Form-item>
        <Form-item label="排序" prop="Seq">
          <Input v-model="formItem.Seq" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="类别" prop="Type">
          <Radio-group v-model="formItem.Type">
            <Radio label="1">目录功能</Radio>
            <Radio label="0">普通功能</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="父目录"  prop="Pid">
          <Select v-model="formItem.Pid" :disabled="isMenu">
            <Option v-for="item  in parentRes" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
          </Select>
        </Form-item>
        <Form-item label="说明" prop="Remark">
          <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
          </Input>
        </Form-item>
      </Form>
    </Modal>
  </Row>
</template>
<script>
  import api from '../../api'
  import {mapMutations, mapGetters, mapState} from 'vuex'
  import{inputString} from '../../libs/util'
  import dtable from '../../components/table/dtable.vue'
  export default {
    data () {
      return {
        loading: true,
        columns: [
          {
            title: '名称',
            key: 'Name',
            sortable: true
          },
          {
            title: '类别',
            key: 'Type',
            sortable: true,
            render (h, {row, column, index}) {
              // return `<span>${(row.Type === 1) ? '目录功能' : '普通功能'}</span>`;
              return  h('span', {}, row.Type === 1 ? '目录功能' : '普通功能')
            }
          },
          {
            title: '父路径',
            key: 'Pname',
            sortable: true,
          },
          {
            title: 'Url',
            key: 'Url',
            sortable: true
          },
          {
            title: 'Logo',
            key: 'Logo',
            render: (h, {row, column, index}) => {
              // return `<Icon :type="row.Logo"></Icon>`;
              return h('Icon', {props: {type: row.Logo}})
            }
          },
          // {
          //   title: '操作',
          //   key: 'action',
          //   width: 150,
          //   align: 'center',
          //   render (row, column, index) {
          //     return `<i-button type="primary" size="small" @click="edit(${index})">修改</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
          //   }
          // },
          {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, { row, column, index }) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click:() => {
                      // console.log(index)
                      this.edit(row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click:() => {
                      this.remove(row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
        ],
        dataShow: true,//是否显示表格数据查看表单
        dataAll: [],
        spinShow: false,
        editData: false,
        addid: 0,
        formItem: {
          Name: '',
          Url: '',
          Logo: 'plus',
          Type: 0,
          Seq: 100,
          Pid: 0,
          Remark: ''
        },
        ruleValidate: {
          Name: [
            {required: true, message: '名称不能为空', trigger: 'blur'}
          ],
          Url: [
            {required: true, message: '路径不能为空', trigger: 'blur'},
          ],
          Logo: [
            {required: true, message: '路径不能为空', trigger: 'change'}
          ],
        }
      }

    },
    components: {
      dtable,
    },
    computed: {
      ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg']),
      filiterTableDate(){
        let e = this.dataAll.slice()
        let keys = this.searchKey
        let filterData = function (element) {
          if (keys === "") {
            return true
          }
          for (let o in element) {
            if (String(element[o]).indexOf(keys) >= 0) {
              return true
            }
          }
          return false
        }
        let fdata = e.filter(filterData)
        this.total = fdata.length
        return fdata
      },
      curTableData() {
        let from = this.pageSize * (this.current - 1)
        let to = from + this.pageSize
        return this.filiterTableDate.slice(from, to)
      },
//      父资源
      parentRes() {
        let pr = []
        pr.push({Id: 0, Name: "根目录"})
        for (let e in this.dataAll) {
          if (this.dataAll[e].Type === 1 ) {
            pr.push({
              Name: this.dataAll[e].Name,
              Id: this.dataAll[e].Id
            })
          }
        }
        console.log(pr)
        return pr
      },
      isMenu(){
          if(Number(this.formItem.Type)===1){
              return false
          }else {
              return true
          }
      }
    },
    watch: {},
    methods: {
      getall (){
        this.spinShow = true
        api.getResource().then(response => {
          if (response.data.code === 0) {
            this.dataAll = response.data.Data
            this.total = (response.data.Data).length
          } else {
            this.$Message.error(this.msg)
          }
        })
        setTimeout(() => {
          this.spinShow = false;
        }, 500);
      },
      show (row) {
        this.showItem = row
        this.showData = true
      },
      edit(index){
        this.addid = 0
        this.formItem = index
        this.editData = true
      },
      add(){
        this.addid = 1
        this.$refs['editForm'].resetFields()
        this.editData = true
      },
      asyncOK(){
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            if (this.addid === 0) {
              api.updateResource(this.formItem).then(response => {
                if (response.data.code === 0) {
                  this.getall()
                  this.$Message.success(this.msg)
                } else {
                  this.$Message.error(this.msg, 4)
                }
              }, err => {
                this.$Message.error(this.msg, 4)
              })
            } else if (this.addid === 1) {
              api.addResource(this.formItem).then(response => {
                if (response.data.code === 0) {
                  this.getall()
                  this.$Message.success(this.msg)
                } else {
                  this.$Message.error(this.msg, 4)
                }
              }, err => {
                this.$Message.error(this.msg, 4)
              })
            }
            setTimeout(() => {
              this.editData = false;
            }, 500);
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      asyncCancel(){
        this.getall()
      },
      remove(row) {
        this.$Modal.warning({
          title: '警告',
          content: '确认删除吗',
          onOk: () => {
            this.del(row)
          }
        })
      },
      del(row){
        api.deleteResource(row).then(response => {
          if (response.data.code === 0) {
            this.getall()
            this.$Message.success(this.msg)
          } else {
            this.$Message.error(response.data.message, 4)
          }
        }, error => {
          this.$Message.error(this.msg, 4)
        })
      }
    },
    mounted (){
      let self = this
      self.getall()
    }
  }
</script>


